﻿@model MealBooking.Core.Models.Orders.Order
@{
    var order = Model;
    ViewBag.HeaderTitle = "Edit Order";
    Layout = "~/Views/Shared/_Layout.cshtml";
}
<!--Navbar-->
<div data-role="navbar">
    <div class="float-left">
        <div data-role="controlgroup" data-type="horizontal" data-inset="true" data-mini="true"
            data-theme="c">
        </div>
    </div>
    <!--nav bar order by-->
    <div class="float-right">
        <div data-role="controlgroup" data-type="horizontal" data-inset="true" data-mini="true"
            data-theme="c">
        </div>
    </div>
</div>
<!--Navbar End-->
@using (Html.BeginForm("EditTodayOrder", "Order", FormMethod.Post))
{
    var mealsWithSum = order.MealsWithSum;
    <ul data-role="listview" data-inset="true" data-mini="true">
        <li data-role="list-divider">Detail</li>
        <li>
            <div class="clear ui-bar">
                @foreach (var mealWithSum in mealsWithSum)
                {
                    var meal = mealWithSum.Meal;

                    <div class="width-25">
                        <label>
                            <input type="checkbox" value="@meal.Id" checked="checked" />
                            @meal.Category.Name [Price : @meal.Price][@meal.ToString()]
                        </label>
                    </div>
                    <div class="width-75">
                        <label>
                            Sum :
                            <input type="range" class="range" id="@meal.Id" value="@mealWithSum.MealSum" min="1" max="9" />
                        </label>
                    </div>
                }
            </div>
        </li>
    </ul>
    <ul data-role="listview" data-inset="true" data-mini="true">
        <li data-role="list-divider"></li>
        <li>
            <div data-role="filedcontain" class="ui-grid-a">
                <div class="ui-block-a">
                    <input type="submit" value="Update" />
                </div>
                <div class="ui-block-b">
                    <a data-role="button" data-theme="a" href="@Url.Action("TodayOrder")">Cancel</a>
                </div>
            </div>
        </li>
    </ul>
}
<script type="text/javascript">
    $("input[type='checkbox']").bind("change", change);
    $("form").submit(function () {
        var selectedMeal = $("input[type='checkbox']:checked");
        if (selectedMeal.length > 0) {
            selectedMeal.each(function (i) {
                var id = $(this).attr("value");
                $(this).attr("name", "MealsWithSum[" + i + "].Id");
                $("input[class*='range'][id='" + id + "']").attr("name", "MealsWithSum[" + i + "].MealSum");
            });
        }
    });
    //
    function change() {
        var id = $(this).attr("value");
        var checked = $(this).attr("checked");
        var mealSum = $("input[class*='range'][id='" + id + "']");
        if (checked) {
            mealSum.slider("enable");
        }
        else {
            mealSum.slider("disable");
        }
        if ($("input[type='checkbox']:checked").length > 0) {
            $("[type='submit']").button("enable");
        }
        else {
            $("[type='submit']").button("disable");
        }
        $(this).checkboxradio("refresh");
        mealSum.slider("refresh");
    }
</script>
